<template>
  <div>
    <h1>{{ title }}</h1>
    <h3>{{ name }}</h3>
    <h3>{{ age }}</h3>
    <h3>{{ newAge }}</h3>
    <button @click="newAge++">age++</button>
  </div>
</template>

<script>
export default {
  name: 'MySchool',
  data() {
    return {
      title: '信息',
      newAge: this.age
    }
  },
  props: {
    name: {
      type: String,
      required: true,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  }
  /* 
  1 方式一
    props: ['name', 'age']

  2 方式二
    props: {
      name: String,
      age: Number
    }

  3 方式三
    props: {
      name: {
        type: String,
        required: true,
        default: ''
      },
      age: {
        type: Number,
        default: 0
      }
    }

  注意：props是只读的，人为的修改props的值Vue提示警告。正确做法是将接收的props值在data中保存一份，去修改data中保存的值即可。
  */
}
</script>